<template>
  <div>
    <!-- <h1>Home组件</h1>
    <router-link to="/home/game" tag="button" replace>游戏</router-link>
    <router-link to="/home/music" tag="button" replace>音乐</router-link>
    <router-link 
    :to="{
      name: 'News' //组件命名。严格区分大小写
    }" 
    tag="button"
    replace
    >新闻</router-link> -->
    <button @click="toGame">游戏</button>
    <button @click="toMusic">音乐</button>
    <button @click="toNews">新闻</button>
    <!-- //二级music区域 -->
     <!-- 
      缓存路由
      在路由中使用keep-alive
      include和exclude的值是组件的name属性
     -->
    <keep-alive include="Game,Music">
      <router-view></router-view>
    </keep-alive>
    
  </div>
</template>

<script>
export default {
    name: 'Home',
    //编程式路由导航
    methods: {
      toGame() {
        this.$router.push('/home/game',() => {}, () => {});
      },
      toMusic() {
        this.$router.push({
          path: "/home/music"
        })
        .catch(() => {}) 
      },
      toNews() {
        this.$router.push({
          name: "News" 
        })
        .catch(() => {})
      },
    }
}
</script>

<style>

</style>